<template>
  <van-field
    v-model="model"
    is-link
    readonly
    placeholder="选择日期"
    @click="show = true"
  />
  <van-popup v-model:show="show" position="bottom">
    <van-date-picker
      v-model="value"
      :min-date="minDate"
      type="date"
      title="选择日期"
      @cancel="show = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const model = defineModel<string>()
const minDate = new Date(2020, 0, 1)

const show = ref(false)
const value = ref<string[]>([])
const onConfirm = ({ selectedValues }: any) => {
  show.value = false
  model.value = selectedValues.join('-')
}

watch(
  () => model.value,
  val => {
    if (val) {
      value.value = val.split('-')
    } else {
      value.value = []
    }
  }
)
</script>
